<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>目标检测可视化</title>
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <link href="css/styles.css" rel="stylesheet" />
    </head>
    <script language="javascript">
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    function exec1(command) 
    {     
        var ws = new ActiveXObject("WScript.Shell");      
        ws.run(command);           //exec 和 run
        ws = null;
        //alert("ok");             弹出一个小框显示“ok”
    }
    function onImageAccessed(inputFile) {
        var imageLinkUrl = getObjectURL(inputFile.files[0]);
        var rawImageShowColumn = document.getElementById('rawImage');
        var resultImageShowColumn = document.getElementById('imageResult');
        var fileName = inputFile.files[0].name;                          //这就是要取得的图片名称
        var exeUrl = 'pythonw F:/ObjectDetection/VOCdevkit/VOC2007/software_engineering/backend/faster-rcnn1.py F:/ObjectDetection/VOCdevkit/VOC2007/software_engineering/data/' + fileName;
        rawImageShowColumn.setAttribute('src', imageLinkUrl);            //修改imageShow
        exec1(exeUrl);
        resultImageShowColumn.src = '';
    }; 
    function refreshImage(){
        var img = document.getElementById("imageResult");
        var url = "F:/ObjectDetection/VOCdevkit/VOC2007/software_engineering/data/test_000017.jpg" + "?s=" + (new Date()).getTime();
        
        img.src = url;
        //img.src = document.getElementById("rawImage").src;
    }
    function onVideoAccessed(inputFile){
        var rawVideoLinkUrl = getObjectURL(inputFile.files[0]);

        var rawVideoShowColumn = document.getElementById("rawVideoColumn");
        var rawVideoShowSource = document.getElementById("rawVideo");
        var videoResultShowColumn = document.getElementById("videoResultShowColumn");
        var videoResultSource = document.getElementById("videoResult");

        var videoFileName = inputFile.files[0].name;
        var exeUrl = 'pythonw F:/ObjectDetection/VOCdevkit/VOC2007/software_engineering/backend/faster-rcnn.py ' + videoFileName;
        rawVideoShowSource.setAttribute('src', rawVideoLinkUrl);
        rawVideoShowColumn.load();
        videoResultSource.src = '';
        rawVideoShowColumn.play();	//加载视频到页面
        exec1(exeUrl);
    }
    function refreshVideo(){
        var videoResultSource = document.getElementById("videoResult");
        var videoResultColumn = document.getElementById("resultVideoColumn");
        var resultPath = "F:/ObjectDetection/VOCdevkit/VOC2007/software_engineering/data/VideoTest1.mp4" + "?s=" + (new Date()).getTime();
        
        //videoResultSource.src = document.getElementById("rawVideo").src;
        videoResultSource.src = resultPath;

        videoResultColumn.load();
        videoResultColumn.play();
    }
    </script>
    <body class="d-flex flex-column h-100">
        <main class="flex-shrink-0">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <div class="container px-5">
                    <a class="navbar-brand" href="index.html">目标检测可视化</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                            <li class="nav-item"><a class="nav-link" href="index.html">主页</a></li>
                            <li class="nav-item"><a class="nav-link" href="about.html">关于</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <header class="bg-dark py-5">
                <div class="container px-5">
                    <div class="row gx-5 align-items-center justify-content-center">
                        <div class="col-lg-8 col-xl-7 col-xxl-6">
                            <div class="my-5 text-center text-xl-start">
                                <h1 class="display-5 fw-bolder text-white mb-2">目标检测可视化</h1>
                                <p class="lead fw-normal text-white-50 mb-4">使用fatser-rcnn对视频、图像中的物体进行目标检测</p>
                                <div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start">
                                    <a class="btn btn-primary btn-lg px-4 me-sm-3" href="#ImageDetection">进行图片检测</a>
                                    <a class="btn btn-primary btn-lg px-4 me-sm-3" href="#VideoDetection">进行视频检测</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!-- ImageDetection -->
            <section class="bg-dark" id = "ImageDetection">
                <aside class="bg-primary p-sm-5">
                    <div class="d-flex align-items-center justify-content-around flex-column flex-xl-row">
                        <div class="mb-4 mb-xl-0">
                            <div class="fs-3 fw-bold text-white">图片检测</div>
                        </div>
                        <div class="data-bs-parent">
                            <div class="input-group">
                                <input class="form-control" id="inputImage" type="file" accept="image/*" aria-describedby="button-newsletter" onchange="onImageAccessed(this)"/>
                                <button class="btn btn-outline-light" id="button-newsletter" type="button" onclick="refreshImage()">获取结果</button>
                            </div>
                        </div>
                    </div>
                </aside>
                <aside class="bg-gradient p-sm-5">
                    <div class="container px-5 my-5">
                        <div class="row gx-5">
                            <div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center"><img class="img-fluid rounded-3 my-5" src="assets/altPicture.png" id = "rawImage"/></div>
                            <div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center"><img class="img-fluid rounded-3 my-5" src="assets/altResult.png" id = "imageResult"></div>
                        </div>
                    </div>
                </aside>
            </section>
            <!-- VideoDetection -->
            <section class="bg-dark" id = "VideoDetection">
                <aside class="bg-primary p-sm-5">
                    <div class="d-flex align-items-center justify-content-around flex-column flex-xl-row">
                        <div class="mb-4 mb-xl-0">
                            <div class="fs-3 fw-bold text-white">视频检测</div>
                        </div>
                        <div class="data-bs-parent">
                            <div class="input-group">
                                <input class="form-control" type="file" accept="video/*" aria-describedby="button-newsletter" onchange="onVideoAccessed(this)"/>
                                <button class="btn btn-outline-light" id="button-newsletter" type="button" onclick="refreshVideo()">获取结果</button>
                            </div>
                        </div>
                    </div>
                </aside>
                <aside class="bg-gradient p-sm-5">
                    <div class="container px-5 my-5">
                        <div class="row gx-5">
                            <div class="col-lg-6 d-xl-block">
                                <video width="600" controls id = "rawVideoColumn">
                                    <source  id="rawVideo" src="" type="video/mp4">
                                </video>
                            </div>
                            <div class="col-lg-6 d-xl-block">
                                <video width="600" controls id = "resultVideoColumn">
                                    <source id="videoResult"src="" type="video/mp4">
                                </video>
                            </div>
                        </div>
                    </div>
                </aside>
            </section>
        </main>
    </body>
</html>
